<template>
  <div v-show="images" id="swiperTop">
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image.bannerId">
        <img :src="image.pic" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import { getBanner } from "@/request/api/home.js";
export default {
  setup() {
  let images = ref([]);
    onMounted(async () => {
      // axios.get(baseURL +'/banner?type=2').then(
      //     res =>{
      //         console.log(res.data.banners)
      //         images.value = res.data.banners
      //     },
      //     err =>{ images = []}
      // )
    //   Banner 
      let res = await getBanner();
      // console.log(res)
        images.value = res.data.banners;
        // console.log(res);
    
      }

    );

    return { images };
  },
};
</script>

<style lang="less">
//添加id防止和其他用到轮播图的地方发生冲突
#swiperTop {
  margin-top: .2rem;
  .van-swipe {
    width: 100%;
    height: 3rem;

    .van-swipe-item {
      padding: 0 0.2rem;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.2rem;
      }
    }
    .van-swipe__indicator--active {
      background-color: rgb(219, 130, 130);
    }
  }
}
</style>